개요

일단, 현재 옵시디언 디지털 가든에서 지원하는 기능들을 상당수 그대로 유지하면서 만드는 것이 가장 큰 목표이다.
여기에 내가 커스텀하고 싶은 세부 도전 과제와, 필요한 지식들을 먼저 정리해본다.
더불어 현재 코드들의 흐름도 어느 정도 파악할 필요가 있다.

기능 명세

유지해야 할 기능

현재 페이지도 굉장히 좋은 편이라고 생각한다.
그래서 다음의 기능들은 꼭 그대로 유지해야만 한다.

• 좌측 파일 트리 및 검색 기능
• 우측 파일 연결 그래프
• 우측 페이지 헤딩 개요
• 우측 페이지 멘셔닝
• 데이터 뷰 연결
• url 경로는 파일의 경로와 일치
• publsh 필드를 넣어야만 배포되도록

해결해야 할 문제

사실 이것 때문에 내가 본격적으로 작업을 해야겠다고 결정을 내리게 됐다.
한글이 들어간 url에 대해서 내 컴퓨터에서는 500에러가 발생하더라고.
vercel 문서를 찾아봤는데 이건 애플리케이션 서버의 문제라고 하기에, 나는 플러그인이 제공하는 코드의 문제라고 생각했다.
그런데.. 핸드폰으로 들어갈 때는 또 문제가 없다는 것을 알게 됐다.
다른 사람 컴퓨터로도 문제가 없고..
그렇다면 의심되는 지점은, vercel 툴바 관련 이슈이다.
내 컴퓨터는 vercel 로그인이 되어 있어 내 페이지로 들어갈 때 알아서 vercel 관리 툴바가 생긴다.
이는 vercel 측에서 사용자 정보를 읽고 관련한 js 코드를 인젝팅해준다는 것인데, 사실 이때 문제가 생기는 게 아닐까 한다.
이런 문제라면 사실 차라리 다행인 것이, 나한테만 문제가 있는 것이니까..

추가하고 싶은 기능

• 댓글 기능
  • 댓글은 깃허브를 이용할 생각이다.
  • 댓글을 내가 따로 관리하지 않을 것이고, 또한 깃허브 계정을 통해 댓글을 달 수 있게 만들고자 한다.
• 검색 최적화 및 광고 기능
  • 현재 내 블로그는 구글 검색으로 들어갈 수 없는데, 이것도 시급히 해결해야 한다.
    • 이를 위해서는 vercel 단의 설정을 하거나, 만들어진 html 파일에 커스텀 헤더를 넣는 방식으로 해결해야만 한다.
  • 광고 수익은 그다지 추구하는 것은 아니다.
    • 다만 난이도가 높지 않고 글의 가시성을 크게 해치지 않는 선에서는 적당히 배너를 넣는 것도 내게 이득이 될 것 같다.
• 파일 포매터가 보이도록
  • 많이는 이용하지 않지만, 그래도 파일 필드를 이용해서 핵심 정보들을 넣어두는 경우가 많기 때문에 관련한 정보가 제대로 보이도록 만들어야 한다.
• 태그 페이지
  • 나는 태그들을 이용해서 글들의 유기성이 자동 추적되도록 지원하고 있기 때문에, 이것을 내 블로그를 보는 사람들이 제대로 볼 수 있도록 해야 한다.
• 폴더 노트
  • 폴더와 이름이 동일한 노트는 폴더를 클릭할 때 클릭이 되도록, 폴더노트를 넣고 싶다.
  • 블로그 사용성을 깨뜨릴 여지가 있어서 조금은 조심스럽다.
• 동영상 재생
  • 많이 활용은 하지 않지만, 간혹 동영상을 넣는 경우가 있는데, 이런 것이 원활하게 실행되도록 하고 싶다.
    • 유튜브로 동영상을 올리고 이를 이용하는 방식을 고려해볼 수 있다.
• CSS
  • 내 옵시디언에 사용되는 CSS를 가능한 그대로 적용하고 싶다.
  • 이건 많은 커스텀이 필요할 수도 있어서, 가능한 후순위이다.

현 코드 분석

레포 구조

이게 vercel로 올라가는 내 깃헙 레포이다.
src에 내 문서들이 들어가는데, 이 문서들은 마크다운 파일로 들어가있다.
추가적으로 커스텀이 되어 나중에 vercel에서 빌드를 시키는 시점에 각종 페이지 임베딩이나, 데이터뷰가 제대로 반영되도록 만들어져 있다.

그럼 이 레포의 구조는 누가 만들어주는가?^[1]
옵시디언 디지털 가든 플러그인이 내 옵시디언 노트들을 가공해 src 디렉토리에 넣어준다.

내 경우 문서가 만들어지는 방식 자체에는 큰 불만이 없으므로, 내 레포 코드에서 바꿀 포인트를 찾아야 한다.

vercel 빌드 과정

vercel.json 파일에 설정된 내용으로 빌드와 배포가 진행된다.
이때 11ty라는, md 파일을 html로 변환하는 라이브러리가 사용된다.

관련 문서

참고